<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_浮动综合练习</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .main {
    }
    .center {
        width: 1100px;
        background-color: #02fcf4;
        margin: 0 auto;
    }
    .f1 {
        overflow: hidden;
        margin-bottom: 10px;
    }
    .f1>.left {
        background-color: gray;
        width: 611px;
        height: 376px;
        float: left;
        margin-right: 10px;
    }
    .f1>.right {
        background-color: yellow;
        width: 375px;
        height: 376px;
        float: left;
        /*margin-right: 8px;*/
    }
    .f2 {
        overflow: hidden;
    }
    .f2>.left {
        background-color: pink;
        width: 366px;
        height: 233px;
        float: left;
        margin-right: 20px;
    }
    .f2>.card {
        background-color: #0aa1ed;
        width: 198px;
        height: 233px;
        float: left;
        margin-right: 8px;
    }
    .f2>.card3 {
        margin-right: 0;
    }
</style>
<body>
<div class="main">
    <div class="center">
        <div class="f1">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="f2">
            <div class="left"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card card3"></div>
        </div>
    </div>
</div>
</body>
</html>